<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假申请 - 员工请假审批系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
</head>
<body class="bg-base-200 min-h-screen">
<!-- 导航栏 -->
<div class="navbar bg-primary text-primary-content shadow-lg">
    <div class="navbar-start">
        <a href="/leave/" class="btn btn-ghost text-xl font-bold">
            <i class="fas fa-calendar-check mr-2"></i>
            请假审批系统
        </a>
    </div>
    <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
            <li><a href="/leave/" class="btn btn-ghost">首页</a></li>
            <li><a href="/leave/apply" class="btn btn-ghost btn-active">请假申请</a></li>
            <li><a href="/leave/manager" class="btn btn-ghost">领导审批</a></li>
            <li><a href="/leave/boss" class="btn btn-ghost">老板审批</a></li>
            <li><a href="/leave/monitor" class="btn btn-ghost">流程监控</a></li>
        </ul>
    </div>
</div>

<!-- 主要内容 -->
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-base-content mb-4">
                <i class="fas fa-plus-circle text-primary mr-3"></i>
                请假申请
            </h1>
            <p class="text-lg text-base-content/70">填写请假信息，提交审批申请</p>
        </div>

        <!-- 申请表单 -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <form id="leaveForm" class="space-y-6">
                    <!-- 申请人 -->
                    <div class="form-control">
                        <label class="label">
                                <span class="label-text text-lg font-semibold">
                                    <i class="fas fa-user mr-2 text-primary"></i>
                                    申请人
                                </span>
                        </label>
                        <input type="text" id="applicant" name="applicant"
                               placeholder="请输入申请人姓名"
                               class="input input-bordered input-lg w-full" required>
                    </div>

                    <!-- 请假原因 -->
                    <div class="form-control">
                        <label class="label">
                                <span class="label-text text-lg font-semibold">
                                    <i class="fas fa-comment mr-2 text-primary"></i>
                                    请假原因
                                </span>
                        </label>
                        <textarea id="reason" name="reason"
                                  placeholder="请详细说明请假原因"
                                  class="textarea textarea-bordered textarea-lg h-24 w-full" required></textarea>
                    </div>

                    <!-- 开始日期 -->
                    <div class="form-control">
                        <label class="label">
                                <span class="label-text text-lg font-semibold">
                                    <i class="fas fa-calendar-alt mr-2 text-primary"></i>
                                    开始日期
                                </span>
                        </label>
                        <input type="date" id="startDate" name="startDate"
                               class="input input-bordered input-lg w-full" required>
                    </div>

                    <!-- 结束日期 -->
                    <div class="form-control">
                        <label class="label">
                                <span class="label-text text-lg font-semibold">
                                    <i class="fas fa-calendar-check mr-2 text-primary"></i>
                                    结束日期
                                </span>
                        </label>
                        <input type="date" id="endDate" name="endDate"
                               class="input input-bordered input-lg w-full" required>
                    </div>

                    <!-- 请假天数显示 -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <div>
                            <div class="font-bold">请假天数: <span id="dayCount">0</span> 天</div>
                            <div class="text-sm" id="approvalFlow">请选择日期计算天数</div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="form-control mt-8">
                        <button type="submit" class="btn btn-primary btn-lg w-full">
                            <i class="fas fa-paper-plane mr-2"></i>
                            提交申请
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 流程说明 -->
        <div class="card bg-base-100 shadow-xl mt-8">
            <div class="card-body">
                <h2 class="card-title text-xl mb-4">
                    <i class="fas fa-route text-info mr-2"></i>
                    审批流程说明
                </h2>
                <div class="steps steps-vertical lg:steps-horizontal">
                    <div class="step step-primary">
                        <div class="step-content">
                            <div class="font-bold">提交申请</div>
                            <div class="text-sm text-base-content/70">员工填写请假信息</div>
                        </div>
                    </div>
                    <div class="step step-primary">
                        <div class="step-content">
                            <div class="font-bold">领导审批</div>
                            <div class="text-sm text-base-content/70">直属领导进行初审</div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-content">
                            <div class="font-bold">老板审批</div>
                            <div class="text-sm text-base-content/70">请假天数>2天需要老板审批</div>
                        </div>
                    </div>
                    <div class="step">
                        <div class="step-content">
                            <div class="font-bold">审批完成</div>
                            <div class="text-sm text-base-content/70">流程结束，通知结果</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 成功提示模态框 -->
<dialog id="successModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg text-success">
            <i class="fas fa-check-circle mr-2"></i>
            申请提交成功
        </h3>
        <p class="py-4" id="successMessage">您的请假申请已成功提交，请等待审批。</p>
        <div class="modal-action">
            <button class="btn btn-primary" onclick="window.location.href='/leave/'">返回首页</button>
            <button class="btn" onclick="document.getElementById('successModal').close()">关闭</button>
        </div>
    </div>
</dialog>

<!-- 错误提示模态框 -->
<dialog id="errorModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg text-error">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            提交失败
        </h3>
        <p class="py-4" id="errorMessage">请检查输入信息后重试。</p>
        <div class="modal-action">
            <button class="btn" onclick="document.getElementById('errorModal').close()">关闭</button>
        </div>
    </div>
</dialog>

<script>
    // 计算请假天数
    function calculateDays() {
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;

        if (startDate && endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);

            if (end >= start) {
                const timeDiff = end.getTime() - start.getTime();
                const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;

                document.getElementById('dayCount').textContent = dayDiff;

                // 显示审批流程
                const flowText = dayDiff <= 2 ?
                    '审批流程: 申请 → 领导审批 → 完成' :
                    '审批流程: 申请 → 领导审批 → 老板审批 → 完成';
                document.getElementById('approvalFlow').textContent = flowText;
            } else {
                document.getElementById('dayCount').textContent = '0';
                document.getElementById('approvalFlow').textContent = '结束日期不能早于开始日期';
            }
        }
    }

    // 监听日期变化
    document.getElementById('startDate').addEventListener('change', calculateDays);
    document.getElementById('endDate').addEventListener('change', calculateDays);

    // 设置默认日期为今天
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('startDate').value = today;
    document.getElementById('endDate').value = today;
    calculateDays();

    // 表单提交
    document.getElementById('leaveForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = {
            applicant: document.getElementById('applicant').value,
            reason: document.getElementById('reason').value,
            startDate: document.getElementById('startDate').value,
            endDate: document.getElementById('endDate').value
        };

        try {
            const response = await axios.post('/leave/submit', formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            if (response.data.success) {
                document.getElementById('successMessage').textContent =
                    `${response.data.message}\n流程实例ID: ${response.data.processInstanceId}`;
                document.getElementById('successModal').showModal();
            } else {
                document.getElementById('errorMessage').textContent = response.data.message;
                document.getElementById('errorModal').showModal();
            }
        } catch (error) {
            document.getElementById('errorMessage').textContent = '网络错误，请稍后重试';
            document.getElementById('errorModal').showModal();
        }
    });
</script>
</body>
</html>